<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="80%"
  >
    <dynForm
      ref="dataForm"
      :info-form="searchForm"
      :rules="rules"
      :select-list="selectList"
      :search-tags="searchTags"
      :is-inline="true"/>
    <div class="btn">
      <el-button type="success" @click="handleAddColumn">添加时机选项</el-button>
    </div>
    <el-table
      :data="tableData"
      :header-cell-style="() => ({ background: '#F2F6FC', color: '#606266' })"
      border
      stripe
      tooltip-effect="dark"
      fit
      style="width: 100%">
      <el-table-column
        :label="$t('timingType')"
        prop="type"
        width="120px"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.type"
            @change="() => {
              scope.row.checkMode = ''
              scope.row.checkName = ''
              scope.row.checkValue = ''
              scope.row.dateRange = []
          }">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('detectionMethod')"
        prop="checkMode"
        width="160px"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.checkMode"
            :disabled="scope.row.type === 1"
            clearable
            @change="changeCheckMode(scope.row)">
            <el-option
              v-for="item in checkWayList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('testName')"
        prop="checkName"
        width="160px"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.checkName" :disabled="scope.row.type === 1 || scope.row.checkMode === 2" clearable/>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('judgmentValue')"
        width="420px"
        prop="">
        <template slot-scope="scope">
          <el-input
            v-show="scope.row.type === 0"
            v-model="scope.row.checkValue"
            :disabled="scope.row.checkMode === 1"
            clearable/>
          <span v-show="scope.row.type === 1">
            <el-date-picker
              v-model="scope.row.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              format= "yyyy-MM-dd"/>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('detectiondirection')"
        prop="checkDirection"
        width="160px"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.checkDirection"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="正向"
            inactive-text="反向"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('iseffective')"
        prop="status">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('action')"
        prop="">
        <template slot-scope="scope">
          <el-link
            :underline="false"
            type="primary"
            @click="handlDelRow(scope.$index)"
          >{{ $t('delete') }}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer">
      <el-button
        icon="el-icon-circle-close"
        @click="handleClose"
      >{{ $t("cancel") }}</el-button>
      <el-button
        v-btnThrottle="doSave"
        type="primary"
        icon="el-icon-receiving"
      >{{ $t("save") }}</el-button>
  </span></el-dialog>
</template>

<script>
import { getCheckTypeList, getCheckPointList,
  getCheckAreaList, getOpportunitysTypeList,
  getCheckWayList, getInfos, doAdd, doUpdate
} from '@/api/checkManagement/checkTiming'

export default {
  name: 'CheckTimingDialog',
  data() {
    return {
      dialogVisible: false,
      title: '',
      searchForm: {},
      selectList: {},
      searchTags: Object.freeze([
        { label: this.$t('checkOpportunity'), prop: 'name', tag: 'DynInput' },
        { label: this.$t('detectionType'), prop: 'checkType', tag: 'DynSelect' },
        { label: this.$t('detectionLogicPoint'), prop: 'checkPoint', tag: 'DynSelect' },
        { label: this.$t('timingDetectionArea'), prop: 'opportunityArea', tag: 'DynSelect' },
        { label: this.$t('step'), prop: 'step', tag: 'DynInput' },
        { label: this.$t('priority'), prop: 'priority', tag: 'DynInput' },
        { label: this.$t('iseffective'), prop: 'status', tag: 'DynSwitch' }
      ]),
      rules: {
        eqpStatusEdit: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('ModifiedStatus')}`, trigger: 'change' }]
      },
      tableData: [],
      typeList: [],
      checkWayList: []
    }
  },
  methods: {
    async handleOpen(row) {
      if (row && row.id) {
        const res = await getInfos({ id: row.id })
        const { items, ...obj } = res.data
        this.searchForm = obj
        this.tableData = items
        this.title = this.$t('modify')
      } else {
        this.title = this.$t('add')
      }
      this.getCheckTypes()
      this.getCheckPoints()
      this.getCheckAreas()
      this.getOpportunitysType()
      this.getCheckWay()
      this.dialogVisible = true
    },
    doSave() {
    //   this.$refs['dataForm'].validate((valid) => {
    //     if (valid) {
      if (this.searchForm.id) {
        doUpdate(this.$clearNull({ ...this.searchForm, items: this.tableData })).then(res => {
          this.$betterTips(res, this.handleClose, this.handleUpdate)
        })
      } else {
        doAdd(this.$clearNull({ ...this.searchForm, items: this.tableData })).then(res => {
          this.$betterTips(res, this.handleClose, this.handleUpdate)
        })
      }
    //     }
    //   })
    },
    handleAddColumn() {
      this.tableData.push({ type: 0, checkMode: '', checkValue: '', checkName: '', dateRange: [] })
    },
    handlDelRow(index) {
      this.tableData.splice(index, 1)
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    },
    changeCheckMode(row) {
      if (row.checkMode === 1) {
        row.checkValue = ''
      } else if (row.checkMode === 2) {
        row.checkName = ''
      }
    },
    async getCheckTypes() {
      const res = await getCheckTypeList()
      this.$set(this.selectList, 'checkType', res.data)
    },
    async getCheckPoints() {
      const res = await getCheckPointList()
      this.$set(this.selectList, 'checkPoint', res.data)
    },
    async getCheckAreas() {
      const res = await getCheckAreaList()
      this.$set(this.selectList, 'opportunityArea', res.data)
    },
    async getOpportunitysType() {
      const res = await getOpportunitysTypeList()
      this.typeList = res.data
    },
    async getCheckWay() {
      const res = await getCheckWayList()
      this.checkWayList = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.btn{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
</style>
